<template>
    <div class="warp-2 body-content" style="height: 100%;">
        <navbar :title="$t('personal_knowledge')"></navbar>
        <div class="content-noBottom">
            <div class="box-tab-01 paddingLR15 white-bg bottom-shadow-02">
                <ul class="clearfix">
                    <li class="color666" v-bind:class="{'cur' : index == 0}" @click="selectType(0)">{{ $t('type_all_title') }}</li>
                    <li class="color666" v-bind:class="{'cur' : index == 1}" @click="selectType(1)">{{ $t('ARTICLE') }}</li>
                    <li class="color666" v-bind:class="{'cur' : index == 2}" @click="selectType(2)">{{ $t('DOCUMENT') }}</li>
                    <li class="color666" v-bind:class="{'cur' : index == 3}" @click="selectType(3)">{{ $t('VEDIO') }}</li>
                    <li class="color666" v-bind:class="{'cur' : index == 4}" @click="selectType(4)">{{ $t('AUDIO') }}</li>
                </ul>
            </div>
            <div style="height: calc(100% - 44px);" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getKnowledgeList"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <ul class="white-bg module-list-11 ">
                                <template v-for="list in knowledgeList">
                                    <li class="clearfix"  :key="list.id" @click="detatilJump(list.id)" v-if="list.type != 'BRAIN'">
                                    <div >
                                        <div class="word-clamp-2 font-size14 " >
                                            <div style="width: 280px;">
                                                <span class="color999">{{ $t(list.type) }}</span>
                                                <em class="point"></em>{{ list.title }}
                                            </div>
                                            <div  :class="list.kbiAppStatus === 'PENDING'?'wait-color':list.kbiAppStatus === 'APPROVED'?'pass-color':'refuse-color'" @click.stop="lookReason(list)">{{approve[list.kbiAppStatus]}}</div>
                                            </div>
                                        <p class="color999 font-size11" style="margin-top: 7px;">
                                            <span>{{ list.createTime | formTime('splitTime') }}</span>
                                            <span style="float: right;"><em class="browse-icon"></em>{{ list.accessCount }}</span>
                                            <span style="float: right;margin-right: 10px;"><em class="like-icon"></em>{{ list.loveCount ? list.loveCount : '0' }}</span>
                                        </p>
                                    </div>
                                </li>
                                </template>
                            </ul>
                            <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t('no_data') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script>
import {Dialog} from 'vant';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'MyKnowledge',
    components: {
        Dialog
    },
    data() {
        return {
            total: 0,
            pageNo: 1,
            index: 0,
            isLoading: false,
            knowledgeList: [],
            usrEntId: -1,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        detatilJump(id) {
            this.$router.push(`/knowledgeDetail/${id}`);
        },
        lookReason(list) {
            //
            if (list.kbiAppStatus === 'REAPPROVAL') {
                Dialog.alert({
                    title: this.$t('Refuse_to_reason'),
                    message: list.kbiRejectReason,
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#075ebb'
                }).then(() => {
                    // on close
                });
            }
        },
        selectType(type) {
            this.index = type;
            this.isLoading = true;
            this.knowledgeList = [];
            this.onPulldownTop();
        },
        getKnowledgeList(option) {
            let type = 'ALL';
            if (this.index === 1) {
                type = 'ARTICLE';
            } else if (this.index === 2) {
                type = 'DOCUMENT';
            } else if (this.index === 3) {
                type = 'VEDIO';
            } else if (this.index === 4) {
                type = 'AUDIO';
            }
            this.$axios.get(`/app/api/trainee/my/file/list/${this.usrEntId}`, {
                params: {
                    pageNo: this.pageNo,
                    type: type
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.knowledgeList = res.data.results;
                    } else {
                        this.knowledgeList = [...this.knowledgeList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowledgeList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getKnowledgeList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    computed: {
        /**
         * 审批状态
         * */
        approve() {
            return {
                PENDING: this.$t('repository38'),
                APPROVED: this.$t('repository39'),
                REAPPROVAL: this.$t('repository40')
            };
        }
    },
    created() {
        this.usrEntId = this.cwnDecrypt(this.$route.params.usrEntId);
        this.isLoading = true;
        this.getKnowledgeList();
    }
};
</script>

<style scoped lang="less">
    .clearfix {
        padding-left: 20px;
        display: flex;
        &>li {
            flex: 1;
            margin-right: 20px;
            text-align: center;
        }
    }
    .box-tab-01 li{
        margin-right: 23px;
    }
    .pass-color{
    color: #00ba5f;
    width: 60px;
    text-align: center;
  }
  .refuse-color{
    color: #f51717;
    width: 60px;
    text-align: center;
  }
  .wait-color{
    color:#fb6d0e;
    width: 60px;
    text-align: center;
  }
  .word-clamp-2{
      display: flex;
      justify-content: space-between;
  }

</style>
